<template>
  <div class="header">
    <div :class="`${lsh} head-name`">
      {{ headerText }}
    </div>
    <div class="row1">
      <div class="left-info">
        <div class="weather-icon">
          <img src="@/assets/image/sun.png" />
        </div>
        <span class="color-f temperature">26-32°C</span>
        <span class="color-d8">多云 空气质量：优</span>
      </div>
      <div class="right-info">
        <template v-if="cureentMenu == 2">
          <div class="time-box">
            <span class="color-f">{{ timeStr2 }}</span>
            <span class="hour">{{ timeStr3 }}</span>
          </div>
        </template>
        <template v-else>
          <div class="time-box">
            <span class="color-f">{{ timeStr1 }}</span>
            <span class="hour" style="margin-left: 5%">{{ timeStr3 }}</span>
          </div>
        </template>
      </div>
    </div>
    <div class="left-menu">
      <div
        :class="cureentMenu == 0 ? 'menu l-menu-bg-active ' : 'menu l-menu-bg'"
        @click="onMenu(0)"
      >
        <div>首页</div>
      </div>
      <div
        :class="cureentMenu == 1 ? 'menu l-menu-bg-active ' : 'menu l-menu-bg'"
        @click="onMenu(1)"
      >
        <div>自建房智慧监管</div>
      </div>
    </div>
    <div class="right-menu">
      <div
        :class="cureentMenu == 2 ? 'menu r-menu-bg-active ' : 'menu r-menu-bg'"
        @click="onMenu(2)"
      >
        <div>智能用电AI防控</div>
      </div>
      <div
        :class="cureentMenu == 3 ? 'menu r-menu-bg-active ' : 'menu r-menu-bg'"
        @click="onMenu(3)"
      >
        <div>综合数据组件</div>
      </div>
      <!-- <div
        :class="cureentMenu == 4 ? 'menu r-menu-bg-active ' : 'menu r-menu-bg'"
        @click="onMenu(4)"
      >
        <div>风险管理措施</div>
      </div> -->
    </div>
  </div>
</template>

<script>
const dayjs = require("dayjs");
import "dayjs/locale/zh-cn"; // 需要引入中文语言包
dayjs.locale("zh-cn"); // 设置为中文

export default {
  name: "headerTop",
  props: {
    cureentMenu: {
      type: Number,
      default: 0,
    },
    headerText: {
      type: String,
      default: "",
    },
  },
  watch: {
    headerText: {
      handler(newVal) {
        if (newVal == "汉丰街道智慧应用场景") {
          this.lsh = "ls-35";
        }
        if (newVal == "自建房智慧监管应用场景") {
          this.lsh = "ls-25";
        }
        if (newVal == "智能用电AI防控应用场景") {
          this.lsh = "ls-25";
        }
        if (newVal == "综合数据组件") {
          this.lsh = "ls-10";
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      timer: null,
      timeStr1: "",
      timeStr2: "",
      timeStr3: "",
      lsh: "ls-35", //头部抬头文字行高
    };
  },
  mounted() {
    /* 每秒定时刷新 */
    let that = this;
    this.timer = setInterval(() => {
      that.initDateTime();
    }, 1000);
  },
  beforeDestroy() {
    /* 离开页面前销毁定时器 */
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    initDateTime() {
      this.timeStr1 = dayjs(new Date()).format("YYYY/MM/DD");
      this.timeStr2 = dayjs(new Date()).format(`YYYY年MM月DD日 dddd`);
      this.timeStr3 = dayjs(new Date()).format("HH:mm:ss");
    },
    onMenu(index) {
      this.$emit("changeMenu", index);
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 100%;
  background: url("@/assets/image/headerbg.png") no-repeat;
  background-size: 100% 100%;
  .head-name {
    margin: auto;
    color: #fff;
    text-align: center;
    font-family: "YouSheBiaoTiHei";
    font-size: 0.34rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.2vw;
    line-height: 8vh;
  }

  .row1 {
    width: 100%;
    height: 40%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 3vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .left-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .temperature {
        color: #fff;
        font-family: "SourceHanSansCN";
        font-size: 0.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0 0.5vw;
      }
      .weather-icon {
        width: 0.2rem;
        height: 0.2rem;
        line-height: 0.2rem;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .color-f {
        color: #fff;
        font-size: 0.12rem;
      }
      .color-d8 {
        color: #d8d8d8;
        font-size: 0.12rem;
      }
    }
    .right-info {
      .time-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .hour {
          color: #fff;
          text-shadow: 0px 3px 6px rgba(0, 102, 255, 0.62);
          font-family: "YouSheBiaoTiHei";
          font-size: 0.24rem;
          font-style: normal;
          font-weight: 400;
          padding-left: 0.6vw;
          width: 5vw;
        }
        .color-f {
          font-size: 0.12rem;
          color: #fff;
        }
      }
    }
  }

  .left-menu {
    width: 25%;
    height: 50%;
    position: absolute;
    left: 5%;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // background-color: salmon;
  }

  .right-menu {
    width: 25%;
    height: 50%;
    position: absolute;
    right: 5%;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // background-color: salmon;
  }

  .l-menu-bg {
    background: url("@/assets/image/l-menu-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .l-menu-bg-active {
    background: url("@/assets/image/l-menu-active-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .r-menu-bg {
    background: url("@/assets/image/r-menu-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .r-menu-bg-active {
    background: url("@/assets/image/r-menu-active-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .menu {
    width: 8.8vw;
    height: 2.6vh;
    text-align: center;
    line-height: 2.4vh;
    cursor: pointer;

    > div {
      color: #fff;
      font-size: 0.14rem;
      font-style: normal;
      font-weight: 400;
      color: #fff;
    }
  }
  .menu-active {
  }
  .menu:hover {
  }

  .ls-10 {
    font-size: 0.39rem;
    letter-spacing: 1vw;
  }

  .ls-25 {
    font-size: 0.39rem;
    letter-spacing: 0.25vw;
  }
  .ls-35 {
    font-size: 0.39rem;
    letter-spacing: 0.35vw;
  }
}
</style>
